<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>查看资料 | Any Video</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/siderbar.js"></script>
</head>

<body>

<div th:replace="~{header :: fmenu}"></div>

<div th:replace="~{header :: smenu}"></div>

<div class="pusher">

    <div th:replace="~{header :: pmenu}"></div>

    <div class="nav-divider"></div>

    <div class="ui container">
        <div class="row">
            <div class="ui raised segment">
                <a class="ui red ribbon label">大神信息</a>
                <div class="ui items">
                    <div class="item">
                        <div class="ui tiny image">
                            <img class="ui image" th:src="${user.avatar}"/>
                        </div>
                        <div class="content">
                            <a class="header">[[${user.nickname}]] <i class="man icon"></i></a>
                            <div class="description">
                                [[${user.meta}]]
                            </div>
                            <div class="extra">
                                <button class="ui right floated basic button red" id="attentionBtn"
                                        th:value="${user.id}" th:text="${isAttention} ? '已关注' : '关注'"> 关注
                                </button>
                                <div class="ui label teal" th:if="${user.loginType} == 'QQ'">QQ 用户</div>
                                <div class="ui label teal" th:if="${user.loginType} == 'GITHUB'">Github 用户</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui hidden divider"></div>

    <div class="ui container">

        <div class="row relative">
            <h2 class="ui dividing header red">
                <i class="cube icon item"></i>
                Ta 的仓库
            </h2>

            <div class="ui icon buttons right-absolute">
                <div class="ui disabled basic red button" data-tooltip="上一页" data-position="top left" data-inverted="">
                    <i class="chevron left icon"></i></div>
                <div class="ui disabled basic red button" data-tooltip="下一页" data-position="top left" data-inverted="">
                    <i class="chevron right icon"></i></div>
            </div>
        </div>

        <div class="ui very padded center aligned segment" th:if="${#lists.isEmpty(hubs)}">
            <p>Ta 的仓库空空如也！</p>
        </div>

        <div class="ui four doubling cards">
            <div class="card" th:each="hub : ${hubs}">
                <div class="content">
                    <img class="right floated mini ui image" th:src="${hub.avatar}">
                    <div class="header">[[${hub.name}]]</div>
                    <div class="meta">[[${hub.createTime}]]</div>
                    <div class="description">[[${hub.description}]]</div>
                </div>
                <div class="extra content">
                    <div class="ui two buttons">
                        <a class="ui basic green button" th:href="@{/share/{md5}(md5=${hub.md5})}">浏览</a>
                        <div class="ui basic red button cloneBtn">克隆</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui hidden divider"></div>
</div>

<script>

    /** 添加/取消关注 **/
    $("#attentionBtn").click(function () {
        var btn = $(this);
        btn.attr("class", "ui right floated loading basic button red");
        var otherId = btn.attr("value");
        var attentionAPI = "/user/attention/" + otherId;
        $.get(attentionAPI,
            function (data) {
                if (data.data) {
                    btn.attr("class", "ui right floated basic button red");
                    btn.text("已关注");
                } else {
                    btn.attr("class", "ui right floated basic button red");
                    btn.text("关注");
                }
            });
    });

</script>

<script th:inline="javascript">
    var userInfo = [[${#httpServletRequest.remoteUser}]];

    $(document).ready(function () {
        if (!userInfo) {
            $("#attentionBtn").click(function () {
                window.location.href = "/login";
            });

            $(".cloneBtn").click(function () {
                window.location.href = "/login";
            });
        }
    });

</script>

</body>

</html>